<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="添加好友" :topheight="navBarHeight"></HeadNav>

		<view class="main">
			<view class="search">
				<image src="../../static/img/search.png"></image>
				<!-- @keydown.enter="handle" -->
				<input type="text" placeholder="搜索用户id" confirm-type="search" @confirm="handleSearch" v-model="id">

				<text @click="cancle" v-show="phone">取消</text>
			</view>

			<view v-if="!searchFlag">
				<view class="me-row">
					<view class="id-info">我的ID:{{ userInfo.id }}</view>
					<view class="copy-img" @click="copyId">
						<image src="../../static/img/chat-26.png"></image>
					</view>
				</view>

				<view class="use-box">
					<view class="use-item" @click="jumpBusCard">
						<image src="../../static/img/chat-27.png" class="use-img"></image>
						<text>我的名片</text>
						<image src="../../static/img/chat-20.png" class="use-icon"></image>
					</view>

					<!-- <view class="use-item" @click="jumpUserInfo">
						<image src="../../static/img/chat-28.png" class="use-img"></image>
						<text>扫一扫</text>
						<image src="../../static/img/chat-20.png" class="use-icon"></image>
					</view> -->
				</view>
			</view>

			<view v-else>
				<view class="use-list">
					<view class="use-item" v-for="item in findFriendArr" @click="jumpUserInfo(item)">
						<!-- <image src="../../static/img/chat-27.png" class="use-img"></image> -->
						<image :src="item.avatar" class="use-img"></image>
						<text>{{ item.nickname || '用户一' }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		findUserApi,
		getMeUserAPI,
		friendFindApi
	} from '@/api/api.js'
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				userInfo: '',
				searchFlag: false, // 是否开启了搜索
				phone: '',
				id: '',
				findFriendArr: '',
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			back() {
				uni.navigateBack()
			},
			async handleSearch() {
				// 通过id
				const res = await findUserApi({
					phone: this.id
				})

				if (!res.code) {
					this.findFriendArr = res.data
					console.log('this.findFriendArr==', this.findFriendArr)
				}

				this.searchFlag = true
			},
			jumpUserInfo(use) {
				friendFindApi({
					id: use.id
				}).then(res => {
					console.log();
					if (res.code == 0) {
						uni.navigateTo({
							url: "/pages/common/user-info?id=" + use.id
						})
					} else {
						uni.navigateTo({
							url: '/pages/friend/userInfo?data=' + use.id
						})
					}
				})

			},


			cancle() {
				this.phone = ''
				this.searchFlag = false
			},
			jumpBusCard() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				return

				uni.navigateTo({
					url: '/pages/contact/busCard'
				})
			},

			// 获取本人信息
			async getMeUserInfo() {
				const res = await getMeUserAPI()
				if (!res.code) {
					this.userInfo = res.data
					uni.setStorageSync('userInfo', this.userInfo)
				}
			},

			// 复制id
			copyId() {
				uni.setClipboardData({
					data: this.userInfo.id,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			}
		},
		onLoad() {
			this.getMeUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.main {
			margin-top: 30rpx;
			padding: 0 30rpx;

			.search {
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				height: 76rpx;
				background: #fff;
				border-radius: 40rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					margin-left: 20rpx;
				}

				text {
					padding: 0 18rpx;
					color: #666;
				}
			}

			.me-row {
				display: flex;
				margin-top: 18rpx;

				.id-info {
					flex: 1;
					color: #666;
					font-size: 24rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.copy-img {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.use-box {
				margin-top: 30rpx;
				padding: 30rpx;
				padding-top: 0;
				min-height: 876rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 10rpx;

				.use-item {
					height: 108rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #eee;

					.use-img {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #333;
					}

					.use-icon {
						width: 10rpx;
						height: 20rpx;
						margin-left: auto;
					}
				}
			}

			.use-list {
				min-height: 876rpx;
				padding: 30rpx;
				margin-top: 50rpx;
				background: #fff;
				border-radius: 10rpx;

				.use-item {
					height: 90rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #eee;

					.use-img {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>